<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .box{width: 200px;height:200px;border:solid 1px black;
            text-align: center;line-height: 200px;font-size: 50px;
            margin: 0 auto;background-color: aqua;}
        #btn{display: block;margin: 20px auto;width: 200px;height:40px;} */

        /* .box {width: 300px;height:500px;
            border:solid 1px black;margin: 0 auto;}
        .msg {width: 280px;height:400px;border:solid 1px red;margin: 20px auto;overflow-y: scroll;}
        #txt {margin-left: 20px;}
        #send {margin-left: 20px;}
        p {width: 150px; border-radius: 5px;word-wrap: break-word;} */

        /* #btn {display: inline-block; width: 20px;height: 20px;background-color: white;}
        span {font-size: 20px;font-weight: bold;}
        #box {width: 200px;height: 200px;border: 1px solid red;
            background-color: antiquewhite;
            font-size: 30px;display: none;} */
    </style>
</head>
<body>
    <!-- <div class="box">10</div>
    <input type="button" value="开始" id="btn"> -->
    <!-- <div class="box">
        <div class="msg"></div>
        <div class="input">
            <textarea id="txt"></textarea>
            <input type="button" value="发送" id="send">
        </div>
    </div> -->
    <!-- <input type="button" id="btn">
    <span>自动登录</span>
    <div id="box">为了您的安全，请不要在网吧等公共场所使用！</div>
    <script> -->
        // 2. 倒计时 - 单按钮
        //     - 要求：
        //         - 每次数字变化，更改随机背景色
    //     var box = document.getElementsByClassName("box")[0];
    //     var btn = document.getElementById("btn");
    //     var t;
    //     var i = 0;
    //     var s = box.innerHTML;

    //     btn.onclick = function(){
    //         if(i === 0){
    //             start();
    //             i = 1;
    //         }else if(i === 1){
    //             stop();
    //             i = 0;
    //         }else{
    //             reset();
    //             i = 0;
    //         }
            
    //     }

    // function reset(){
    //     box.innerHTML = s;
    //     btn.value = "开始";
    // }

    // function stop(){
    //     clearInterval(t);
    //     btn.value = "继续";
    // }

    // function start(){
        
    //     clearInterval(t);
    //     t = setInterval(function(){
    //         if(box.innerHTML <= 1){
    //             clearInterval(t);
    //             box.innerHTML = "结束了";
    //             i = 2;
    //             btn.value = "复位";
    //         }else{
    //             box.style.backgroundColor = color();
    //             box.innerHTML--;
    //         }
    //     },1000);
    //     btn.value = "暂停"
    // }

    // function color() {
    //     return '#' + Math.round(Math.random() * 0xffffff).toString(16);
    // }
    
        // 3. 美化 模拟聊天对话框 案例的布局
        // var msg = document.querySelector(".msg");
        // var txt = document.getElementById("txt");
        // var send = document.getElementById("send");
        // var i = 0;
        // send.onclick = function(){
        //     var p = document.createElement("p");
        //     p.innerHTML = txt.value;
        //     msg.appendChild(p);
        //     txt.value = "";
        //     if(i === 0){
        //         p.style.backgroundColor = "aqua";
        //         p.style.marginLeft = "10px";
        //         i = 1;
        //     }else{
        //         p.style.backgroundColor = "yellowgreen";
        //         p.style.marginLeft = "120px";
        //         i = 0;
        //     }
        // }

        // 4. 自动登录勾选提示效果
        //     - 见课件
        // var btn = document.getElementById("btn");
        // var box = document.getElementById("box");

        // btn.onmouseover = function(){
        //     box.style.display = "block";
        // }
        // var t;
        // btn.onmouseout = function(){
        //     t = setTimeout(function(){
        //         box.style.display = "none";
        //     },2000)
        // }
        // clearTimeout(t);
        // 5. 点击按钮换图片
        

        // 6. 用户在页面输入信息，点击添加，添加到页面的表格中
        //     - 用户点击表格中的删除，可以删除对应的信息


        // 7. 密码强度 - 差，中，强
        //     - 数字，字母，特殊字符
        //         - 任意1种, 差
        //         - 任意2种, 中
        //         - 三种, 难
        //     - 优化强度提示效果
        // 8. 简易万年历
        // 9. 随机点名
    </script>
</body>
</html>